<template>
    <div class="wrapper-box">
        <el-select v-model="provinceCode" placeholder="请选择省" :class="{ item: true, error: error }" @change="getCityList" >
            <el-option :label="province.name" :value="province.adCode" 
                v-for="province in provinceList" :key="province.adCode"></el-option>
        </el-select>
        <el-select v-model="cityCode" placeholder="请选择市" :class="{ item: true, error: error }" @change="getTownList">
            <el-option :label="city.name" :value="city.adCode" 
                v-for="city in cityList" :key="city.adCode"></el-option>
        </el-select>
        <el-select v-model="townCode" v-if="!hideTown" placeholder="请选择区/县" :class="{ item: true, error: error }" @change="setTownName">
            <el-option :label="town.name" :value="town.adCode" 
                v-for="town in townList" :key="town.adCode"></el-option>
        </el-select>
    </div>
</template>

<script>
import { getAreaListByParentCode, } from '@/api/address';

export default {
    props: {
        orginData: {
            type: Array,
            default: ()=>[],
        },
        error: Boolean,
        hideTown: Boolean,
    },
    data(){
        return {
            provinceCode: '',
            provinceName: '',
            cityCode: '',
            cityName: '',
            townCode: '',
            townName: '',

            provinceList: [],   //省 列表
            cityList: [],       //市 列表
            townList: [],       //县/区 列表
        }
    },
    watch: {
        orginData: {
            handler: 'initData',
            immediate: true
        },
    },
    methods: {
        async initData(newArr){
            const [ provinceCode='', cityCode='', townCode='' ] = newArr;
            if( provinceCode&&provinceCode==this.provinceCode && cityCode&&cityCode==this.cityCode && townCode&&townCode==this.townCode){
                return;
            }
            await this.getProvinceList();
            
            if(provinceCode){
                this.provinceCode=provinceCode;
                await this.getCityList(provinceCode);

                if(cityCode){
                    this.cityCode = cityCode;
                    await this.getTownList(cityCode);

                    if(townCode){
                        this.townCode = townCode;
                        this.setTownName();
                    }else{
                        this.townCode = '';
                    }
                }else{
                    this.cityCode = '';
                    this.townCode = '';
                }
            }else{
                this.provinceCode = '';
                this.cityCode = '';
                this.townCode = '';
            }
        },
        getProvinceList(){
            return getAreaListByParentCode().then((data)=>{
                this.provinceList = data||[];
            });
        },
        getCityList(provinceId){
            this.cityCode = '';
            this.townCode = '';
            this.setProvinceName();
            return getAreaListByParentCode(provinceId).then((data)=>{
                this.cityList = data||[];
            });
        },
        getTownList(cityId){
            this.townCode = '';
            this.setCityName();
            return getAreaListByParentCode(cityId).then((data)=>{
                this.townList = data||[];
            });
        },

        setProvinceName(){
            const matchObj = this.provinceList.find(el=>el.adCode==this.provinceCode);
            if(matchObj){
                this.provinceName = matchObj.name;
            }
        },
        setCityName(){
            const matchObj = this.cityList.find(el=>el.adCode==this.cityCode);
            if(matchObj){
                this.cityName = matchObj.name;
            }
        },
        setTownName(){
            const matchObj = this.townList.find(el=>el.adCode==this.townCode);
            if(matchObj){
                this.townName = matchObj.name;
            }
        },

        getAddress(){
            return {
                provinceCode: this.provinceCode,
                provinceName: this.provinceName,
                cityCode: this.cityCode,
                cityName: this.cityName,
                townCode: this.townCode,
                townName: this.townName,
            }
        },
    },
}
</script>

<style lang="less" scoped>
.wrapper-box{
    display: flex;
    .item{
        margin-right: 10px;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 150px;
        width: 150px;
    }
    :deep(.error){
        --el-border-color: #f56c6c;
    }
}
</style>